<template>
	<view>
		<view style="width:100%;height:200upx"></view>
		<view class="logo">
				<image :src="cdnUrl+'/logo.png'" mode="aspectFill" ></image>
				</view>
		<view class="ring">
			
			<view class="loginForm">
				
				<view class="title">{{projectName}}客户登录</view>
				
				<u-tabs :list="typeList" @click="changeType"  lineWidth="150" lineColor="#004ea2" :scrollable="false"></u-tabs>
				<view class="passwordLogin" v-show="type==1">
					<view class="wq-row">
						手机号
					<input type="text" v-model="phone" placeholder="请输入手机号"></input>
					</view>
					<input type="text" style="width: 0; height: 0; position: absolute; z-index: -1;" />
					
					<input type="password" style="width: 0; height: 0; position: absolute; z-index: -1;" />
					<view class="wq-row">
						密&nbsp&nbsp&nbsp&nbsp码
					<input type="password" v-model="password" placeholder="请输入密码"></input>
					</view>
					<view class="wq-row">
						滑动
						<view class="verify"><wq-verify @blockSuccess="canLogin=true" ref="loginVer"></wq-verify></view>
					</view>
					<view class="wq-row">
					<button class="wq-btn" style="width:100%;" @tap="passwordLogin">登录</button>
					</view>
				</view>
				<view class="passwordLogin verifyLogin" v-show="type==2">
					<view class="wq-row">
						手机号
					<input type="text" v-model="phone" placeholder="请输入用户名"></input>
					</view>
					<view class="wq-row">
						滑动
						<view class="verify"><wq-verify @blockSuccess="codeCanSend=true"></wq-verify></view>
					</view>
					<view class="wq-row">
						验证码
					<input type="text" class="codeIpt" v-model="code" placeholder="验证码"></input>
					<view>
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
						<view class="wqLButton" @tap="getCode">{{tips}}</view>
					</view>
					</view>
					<view class="wq-row">
					<button class="wq-btn" style="width:100%;" @tap="verifyLogin">登录</button>
					</view>
				</view>
				<view class="other">
				<view  @tap="toNav('/pages/login/registe')">没有账号，去注册</view>
				<view  @tap="toNav('/pages/login/forget')">忘记密码？</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import helper from '../../common/helper';
import { mixin } from '../../uni_modules/uview-plus';
import api from '@/api.js'
	export default {
		mixins:[helper],
		data() {
			
			return {
				phone:"",
				password:"",
				code:"",
				projectName:"",
				type:1,
				tips:'',
				seconds:60,
				canLogin:false,
				codeCanSend:false,
				typeList:[
					{
						id:1,
						name:"密码登录"
					},{
						id:2,
						name:"验证码登录"
					}
				]
			}
		},
		methods: {
			changeType(e){
				this.type=e.id;
			},
			codeChange(text) {
				this.tips = text;
			},
			passwordLogin(){
				if(this.canLogin==false){
					uni.$u.toast('请拖动滑块后再登录');
					return;
				}
				else if(this.phone==''){
					uni.showToast({
						title:"请输入手机号",
						icon:"none"
					})
					return;
				}else if(this.password==''){
					uni.showToast({
						title:"请输入密码",
						icon:"none"
					})
					return;
				}else{
					var data={phone:this.phone,password:this.password};
					api.doRequest('post','login/verify',data).then(res=>{
						if(res.statusCode==200 && res.data.code==200){
							uni.showToast({
								title:"登录成功",
								icon:"none"
							})
							
							uni.setStorageSync('ctoken',res.data.data);
							setTimeout(function(){
								uni.switchTab({
									url:"/pages/index/index"
								})
							},500);
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:"none"
							})
							this.canLogin=false;
							this.$refs.loginVer.reset();
						}
					})
				}
			},
			verifyLogin(){
				if(this.phone==''){
					uni.showToast({
						title:"请输入手机号",
						icon:"none"
					})
					return;
				}else if(this.code==''){
					uni.showToast({
						title:"请输入验证码",
						icon:"none"
					})
					return;
				}else{
					var data={phone:this.phone,code:this.code};
					api.doRequest('post','login/verifyByCode',data).then(res=>{
						if(res.statusCode==200 && res.data.code==200){
							uni.showToast({
								title:"登录成功",
								icon:"none"
							})
							
							uni.setStorageSync('ctoken',res.data.data);
							setTimeout(function(){
								uni.switchTab({
									url:"/pages/index/index"
								})
							},500);
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:"none"
							})
						}
					})
				}
			},
			getCode() {
				if(this.codeCanSend){
					if (this.$refs.uCode.canGetCode) {
						
							if(this.phone!="" ){
								
								var sendData={phone:this.phone}
								
								
								uni.showLoading({
									title: '正在获取验证码'
								})
								api.doRequest("post", "login/sendCode", sendData).then(res => {
									//console.log(res);
								})
								setTimeout(() => {
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									uni.showToast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								}, 500);
							}
							else{
								uni.showToast({
									title:"请检查您的手机号",
									icon:'none'
								})
							}
						
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}else{
					uni.$u.toast('请拖动滑块后再发送');
				}
				
			},
		},
		inject: ['globalData'],
		onLoad(e){
			uni.setStorageSync('token','');
			const app = getApp();
			this.projectName=this.globalData.name;
		}
		
	}
</script>

<style>
	.logo{width:100%;display: flex;align-items: center;justify-content: center;padding-top:50upx;}
	.logo image{width:200upx; height:200upx;}
.toRegiste{
	width:570upx;
	height:100upx;
	display:flex;
	margin:20upx auto;
	color:#012870;
	align-items: center;
}
.ring {
    position: relative;
    width: 650upx;
    
	margin:0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loginForm{
	width:650upx; 
	background:rgba(255,255,255,0.9);
	backdrop-filter: blur(5px);
	position:relative;
	border-radius:20upx;
	border:2px solid #eee;
	padding-bottom:20upx;
	
}
.passwordLogin{
	margin-top:40upx;
}
.loginForm .title{
	height:100upx;line-height: 100upx; font-size:20px;color:#004ea2;text-align: center;
}
.loginForm:hover{
	box-shadow: 0 0 50upx #eee;
	border:none;
}

.wq-row{display: flex;width:580upx;align-items: center;margin:20upx auto;justify-content: space-between;}
.wq-row input{border:1px solid #ccc;height:70upx;border-radius:10upx;width:440upx;background:#fff; padding-left:20upx;}
.wq-row .codeIpt{width:210upx;}
.ring .ringi {
    position: absolute;
    inset: 0;
    border: 2px solid #c0c0c0;
    transition: 0.5s;
}
.ring .ringi:nth-child(1) {
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    animation: animate 6s linear infinite;
}
.ring .ringi:nth-child(2) {
    border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
    animation: animate 4s linear infinite;
}
.ring .ringi:nth-child(3) {
    border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
    animation: animate2 10s linear infinite;
}
.ring:hover .ringi {
    border: 6px solid var(--clr);
    filter: drop-shadow(0 0 20px var(--clr));
}

.verify{
		width:460upx;
	}
.other{display: flex; align-items: center;justify-content: space-between;color:#004ea2;width:580upx;margin:0 auto;}
</style>
